import QtQuick 6.2
import QtQuick.Controls 6.2
import QtQuick.Layouts 6.2
import QtQuick.Shapes 1.15
import QtQuick.Window 2.15
import QtQuick.Particles 2.15
import QtQuick.Controls.Material 2.15
//import QtQuick.Controls.Universal 2.15
Item {
    id: item1
    width: 1440
    height: 960
    GridLayout {
        id: gridLayout
        width: 386
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.leftMargin: 138
        anchors.bottomMargin: 197
        anchors.topMargin: 347
        rotation: 0
        rows: 2
        columns: 4
        layoutDirection: Qt.LeftToRight
        flow: GridLayout.LeftToRight
        rowSpacing: 0
        columnSpacing: 0

        RangeSlider {
            id: rangeSlider
            z: 1
            Layout.margins: 10
            Layout.rightMargin: 0
            Layout.maximumHeight: 65535
            Layout.leftMargin: 20
            Layout.maximumWidth: 200
            Layout.fillHeight: false
            Layout.fillWidth: false
            stepSize: 1
            first.value: 0
            wheelEnabled: true
            snapMode: RangeSlider.SnapAlways
            first.pressed: false
            Layout.preferredHeight: 300
            second.value: 100
            bottomPadding: 6
            Layout.preferredWidth: 20
            orientation: Qt.Vertical
            first.onMoved:  {
                task_brake.setReprot({"dead_Rx_Low":rangeSlider.first.value},4)
            }
            second.onMoved:  {
                task_brake.setReprot({"dead_Rx_High":rangeSlider.second.value},4)
            }

            Label {
                id: label13
                x: -8
                text: rangeSlider.first.value.toFixed(2)
                anchors.top: parent.bottom
                anchors.topMargin: 0
            }

            Label {
                id: label12
                x: -8
                y: -19
                text: rangeSlider.second.value.toFixed(2)
                anchors.bottom: parent.top
                anchors.bottomMargin: 3
            }

            CheckBox {
                id: checkBox
                width: 59
                height: 37
                anchors.top: parent.bottom
                down: false
                checkState: Qt.Checked
                anchors.horizontalCenterOffset: 0
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: -375
                display: AbstractButton.IconOnly
                onCheckStateChanged: {
                    if(checkBox.checkState){
                        task_brake.setReprot({"ENABLE_Rx":1},2)
                    }else{
                        task_brake.setReprot({"ENABLE_Rx":0},2)
                    }
                }

            }

            Rectangle {
                id: rectangle7
                color: "#43ff3a86"
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.topMargin: rangeSlider.height - rangeSlider.height * axis_rx * (rangeSlider.second.value - rangeSlider.first.value) / rangeSlider.to
                anchors.bottomMargin: rangeSlider.height * rangeSlider.first.value / 100;
                Behavior on anchors.topMargin{
                    NumberAnimation{
                        duration:100
                    }
                }
            }
            to: 100
        }

        RangeSlider {
            id: rangeSlider1
            height: 240
            Layout.maximumWidth: 200
            Layout.margins: 10
            Layout.leftMargin: 10
            stepSize: 1
            first.value: 0
            wheelEnabled: true
            snapMode: RangeSlider.SnapAlways
            first.pressed: false
            Layout.preferredHeight: 300
            second.value: 100
            bottomPadding: 6
            Layout.preferredWidth: 20
            orientation: Qt.Vertical
            first.onMoved:  {
                task_brake.setReprot({"dead_Ry_Low":rangeSlider1.first.value},4)
            }
            second.onMoved:  {
                task_brake.setReprot({"dead_Ry_High":rangeSlider1.second.value},4)
            }
            Label {
                id: label14
                x: -5
                y: -19
                text: rangeSlider1.second.value.toFixed(2)
                anchors.bottom: parent.top
                anchors.bottomMargin: 3
            }

            Label {
                id: label15
                x: -5
                text: rangeSlider1.first.value.toFixed(2)
                anchors.top: parent.bottom
                anchors.topMargin: 0
            }

            CheckBox {
                id: checkBox1
                x: -79
                y: -77
                width: 59
                height: 37
                anchors.top: parent.bottom
                down: false
                checkState: Qt.Checked
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: 0
                anchors.topMargin: -375
                display: AbstractButton.IconOnly
                //                checked: true
                onCheckStateChanged: {
                    if(checkBox1.checkState){
                        task_brake.setReprot({"ENABLE_Ry":1},2)
                    }else{
                        task_brake.setReprot({"ENABLE_Ry":0},2)
                    }
                }
            }

            Rectangle {
                id: rectangle8
                x: -87
                y: 0
                color: rectangle7.color
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.topMargin: rangeSlider1.height - rangeSlider1.height * axis_ry * (rangeSlider1.second.value - rangeSlider1.first.value) / rangeSlider1.to
                anchors.bottomMargin: rangeSlider1.height * rangeSlider1.first.value / 100;
                Behavior on anchors.topMargin{
                    NumberAnimation{
                        duration:100
                    }
                }
            }
            to: 100
        }

        RangeSlider {
            id: rangeSlider2
            Layout.margins: 10
            Layout.leftMargin: 10
            stepSize: 1
            first.value: 0
            wheelEnabled: true
            first.pressed: false
            snapMode: RangeSlider.SnapAlways
            Layout.preferredHeight: 300
            second.value: 100
            bottomPadding: 6
            Layout.preferredWidth: 20
            orientation: Qt.Vertical
            first.onValueChanged:  {
                task_brake.setReprot({"dead_Brake_Low":rangeSlider2.first.value},4)
            }
            second.onValueChanged:   {
                task_brake.setReprot({"dead_Brake_High":rangeSlider2.second.value},4)
            }
            Label {
                id: label16
                x: -5
                y: -19
                text: rangeSlider2.second.value.toFixed(2)
                anchors.bottom: parent.top
                anchors.bottomMargin: 3
            }

            Label {
                id: label17
                x: -5
                text: rangeSlider2.first.value.toFixed(2)
                anchors.top: parent.bottom
                anchors.topMargin: 0
            }

            CheckBox {
                id: checkBox2
                x: 68
                y: -75
                width: 59
                height: 37
                anchors.top: parent.bottom
                down: false
                //                checked: true
                checkState: Qt.Checked
                anchors.horizontalCenterOffset: 1
                anchors.topMargin: -375
                display: AbstractButton.IconOnly

                anchors.horizontalCenter: parent.horizontalCenter
                onCheckStateChanged: {
                    if(checkBox2.checkState){
                        task_brake.setReprot({"ENABLE_Brake":1},2)
                    }else{
                        task_brake.setReprot({"ENABLE_Brake":0},2)
                    }
                }
            }

            Rectangle {
                id: rectangle9
                x: -96
                y: 0
                color: rectangle7.color
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.topMargin: rangeSlider2.height - rangeSlider2.height * axis_brake * (rangeSlider2.second.value - rangeSlider2.first.value) / rangeSlider2.to
                anchors.bottomMargin: rangeSlider2.height * rangeSlider2.first.value / 100;
                Behavior on anchors.topMargin{
                    NumberAnimation{
                        duration:100
                    }
                }
            }
            to: 100
        }

        RangeSlider {
            id: rangeSlider3
            Layout.margins: 10
            Layout.leftMargin: 10
            stepSize: 1
            first.value: 0
            wheelEnabled: true
            snapMode: RangeSlider.SnapAlways
            first.pressed: false
            Layout.preferredHeight: 300
            second.value: 100
            bottomPadding: 6
            Layout.preferredWidth: 20
            orientation: Qt.Vertical
            first.onValueChanged:  {
                task_brake.setReprot({"dead_Throttle_Low":rangeSlider3.first.value},4)
            }
            second.onValueChanged:{
                task_brake.setReprot({"dead_Throttle_High":rangeSlider3.second.value},4)
            }
            Label {
                id: label18
                x: -6
                y: -19
                text: rangeSlider3.second.value.toFixed(2)
                anchors.bottom: parent.top
                anchors.bottomMargin: 3
            }

            Label {
                id: label19
                x: -6
                text: rangeSlider3.first.value.toFixed(2)
                anchors.top: parent.bottom
                anchors.topMargin: 0
            }

            CheckBox {
                id: checkBox3
                x: -113
                y: -75
                width: 59
                height: 37
                anchors.top: parent.bottom
                down: false
                checkState: Qt.Checked
                checked: true
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.horizontalCenterOffset: 1
                anchors.topMargin: -375
                display: AbstractButton.IconOnly
                onCheckStateChanged: {
                    if(checkBox3.checkState){
                        task_brake.setReprot({"ENABLE_Throttle":1},2)
                    }else{
                        task_brake.setReprot({"ENABLE_Throttle":0},2)
                    }
                }
            }

            Rectangle {
                id: rectangle10
                //                x: -97
                //                y: 0
                color: rectangle7.color
                radius: 10
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.topMargin: rangeSlider3.height - rangeSlider3.height * axis_throttle * (rangeSlider3.second.value - rangeSlider3.first.value) / rangeSlider3.to
                anchors.bottomMargin: rangeSlider3.height * rangeSlider3.first.value / 100;
                Behavior on anchors.topMargin{
                    NumberAnimation{
                        duration:100
                    }
                }
            }

            to: 100
        }
    }

    GridLayout {
        id: gridLayout1
        x: 130
        width: 360
        anchors.top: label4.bottom
        anchors.bottom: gridLayout.top
        anchors.topMargin: 44
        anchors.bottomMargin: 19

        Label {
            id: label
            text: qsTr("Rx轴")
            horizontalAlignment: Text.AlignHCenter
            font.pointSize: 18
            Layout.margins: 10
        }

        Label {
            id: label1
            text: qsTr("Ry轴")
            font.pointSize: 18
            Layout.margins: 10
        }

        Label {
            id: label2
            text: qsTr("刹车")
            font.pointSize: 18
            Layout.margins: 10
        }

        Label {
            id: label3
            text: qsTr("油门")
            font.pointSize: 18
            Layout.margins: 10
        }
    }

    Label {
        id: label4
        width: 164
        height: 57
        text: qsTr("死区调节")
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 138
        anchors.topMargin: 171
        font.pointSize: 30
    }

    Label {
        id: label5
        x: 788
        text: qsTr("模式选择")
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 492
        anchors.topMargin: 174
        font.pointSize: 30
    }

    Label {
        id: label6
        x: 788
        text: qsTr("滤波强度")
        anchors.right: parent.right
        anchors.top: label5.bottom
        anchors.rightMargin: 492
        anchors.topMargin: 253
        font.pointSize: 30
    }

    Slider {
        id: slider
        x: 788
        width: 266
        height: 35
        anchors.right: label6.left
        anchors.top: label6.bottom
        wheelEnabled: true
        anchors.rightMargin: -266
        anchors.topMargin: 78
        stepSize: 1
        to: 100
        value: 35
        onValueChanged: {
            var wave = {"wave_filtering":slider.value}
            task_brake.setReprot(wave,8)
        }
    }

    Rectangle {
        id: rectangle
        width: 345
        height: 112
        color: "#9b4a73fe"
        radius: 50
        anchors.left: label5.right
        anchors.top: label5.bottom
        anchors.leftMargin: -160
        anchors.topMargin: 83
        Behavior on color {

            ColorAnimation {
                duration: 500
            }
        }

        MouseArea {
            id: mouseArea3
            anchors.fill: parent
            hoverEnabled: true
            propagateComposedEvents:true
            onEntered: {
                rectangle.color = "#9b4ab3fe"
            }
            onExited: {
                rectangle.color = "#9b4a73fe"
            }
        }
        Rectangle {
            id: rectangle1
            width: 80
            height: 80
            color: "#ffffff"
            radius: 40
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 23

            Rectangle {
                id: rectangle4
                width: 70
                height: 70
                color: "#e91e63"
                radius: 35
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                state: "DISABLE"
                Behavior on color {
                    ColorAnimation {
                        duration: 300
                    }
                }
                states: [
                    State {
                        name: "ENABLE"
                        PropertyChanges {
                            target: rectangle4
                            color:"#00ff00"
                        }
                    },
                    State {
                        name: "DISABLE"
                        PropertyChanges {
                            target: rectangle4
                            color:"#e91e63"
                        }
                    }
                ]
                MouseArea {
                    id: mouseArea
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents:true
                    onEntered: {
                        rectangle4.color = "#f0f000"
                        //                        console.log("??")
                    }
                    onExited: {
                        if(rectangle4.state == "DISABLE"){
                            rectangle4.color = "#e91e63"
                        }else{
                            rectangle4.color = "#00ff00"
                        }
                    }
                    onClicked: {
                        if(rectangle4.state == "DISABLE"){
                            task_brake.setReprot({"MODE_1":1},1)
                            rectangle4.state = "ENABLE"
                            rectangle5.state = "DISABLE"
                            rectangle6.state = "DISABLE"
                        }else{
                            task_brake.setReprot({"MODE_1":0},1)
                            rectangle4.state = "DISABLE"
                            rectangle5.state = "DISABLE"
                            rectangle6.state = "DISABLE"
                        }
                    }
                }
            }
        }

        Rectangle {
            id: rectangle2
            width: 80
            height: 80
            color: "#ffffff"
            radius: 40
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: rectangle1.right
            anchors.verticalCenterOffset: 0
            anchors.leftMargin: 30

            Rectangle {
                id: rectangle5
                width: 70
                height: 70
                color: "#e91e63"
                radius: 35
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                state: "DISABLE"
                Behavior on color {
                    ColorAnimation {
                        duration: 300
                    }
                }
                states: [
                    State {
                        name: "ENABLE"
                        PropertyChanges {
                            target: rectangle5
                            color:"#00ff00"
                        }
                    },
                    State {
                        name: "DISABLE"
                        PropertyChanges {
                            target: rectangle5
                            color:"#e91e63"
                        }
                    }
                ]
                MouseArea {
                    id: mouseArea1
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents:true
                    onEntered: {
                        rectangle5.color = "#f0f000"
                        //                        console.log("??")
                    }
                    onExited: {
                        if(rectangle5.state == "DISABLE"){
                            rectangle5.color = "#e91e63"
                        }else{
                            rectangle5.color = "#00ff00"
                        }
                    }
                    onClicked: {
                        if(rectangle5.state == "DISABLE"){
                            task_brake.setReprot({"MODE_2":2},1)
                            rectangle5.state = "ENABLE"
                            rectangle4.state = "DISABLE"
                            rectangle6.state = "DISABLE"
                        }else{
                            task_brake.setReprot({"MODE_2":0},1)
                            rectangle5.state = "DISABLE"
                            rectangle4.state = "DISABLE"
                            rectangle6.state = "DISABLE"
                        }
                    }
                }
            }

        }
        Rectangle {
            id: rectangle3
            width: 80
            height: 80
            color: "#ffffff"
            radius: 40
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: rectangle2.right
            anchors.leftMargin: 30


            Rectangle {
                id: rectangle6
                width: 70
                height: 70
                color: "#e91e63"
                radius: 35
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                state: "DISABLE"
                Behavior on color {
                    ColorAnimation {
                        duration: 300
                    }
                }
                states: [
                    State {
                        name: "ENABLE"
                        PropertyChanges {
                            target: rectangle6
                            color:"#00ff00"
                        }
                    },
                    State {
                        name: "DISABLE"
                        PropertyChanges {
                            target: rectangle6
                            color:"#e91e63"
                        }
                    }
                ]
                MouseArea {
                    id: mouseArea2
                    anchors.fill: parent
                    hoverEnabled: true
                    propagateComposedEvents:true
                    onEntered: {
                        rectangle6.color = "#f0f000"
                        //                        console.log("??")
                    }
                    onExited: {
                        if(rectangle6.state == "DISABLE"){
                            rectangle6.color = "#e91e63"
                        }else{
                            rectangle6.color = "#00ff00"
                        }
                    }
                    onClicked: {
                        if(rectangle6.state == "DISABLE"){
                            task_brake.setReprot({"MODE_3":4},1)
                            rectangle6.state = "ENABLE"
                            rectangle4.state = "DISABLE"
                            rectangle5.state = "DISABLE"
                        }else{
                            task_brake.setReprot({"MODE_3":0},1)
                            rectangle6.state = "DISABLE"
                            rectangle4.state = "DISABLE"
                            rectangle5.state = "DISABLE"
                        }
                    }
                }
            }

        }



    }

    RowLayout {
        id: rowLayout
        x: 763
        width: 372
        anchors.top: label6.bottom
        anchors.bottom: rectangle.top
        anchors.bottomMargin: 6
        anchors.topMargin: -298
        antialiasing: false
        layoutDirection: Qt.LeftToRight
        spacing: 3

        Label {
            id: label7
            text: qsTr("稳定模式")
            font.pointSize: 18
            Layout.leftMargin: 30
            Layout.margins: 0
        }

        Label {
            id: label8
            text: qsTr("游戏模式")
            font.pointSize: 18
            Layout.leftMargin: 20
        }

        Label {
            id: label9
            text: qsTr("敬请期待")
            font.pointSize: 18
            Layout.leftMargin: 20
        }
    }

    Label {
        id: label11
        x: 795
        y: 570
        text: slider.value
        horizontalAlignment: Text.AlignRight
        font.pointSize: 18

        Label {
            id: label10
            x: 43
            y: 0
            width: 21
            text: qsTr("%")
            font.pointSize: 18
        }
    }
    Rectangle {
        id: rectangle11
        x: 788
        y: 666
        width: 480
        height: 140
        color: "#00ffffff"
        radius: 5
        border.color: "#e91e63"
        Canvas {
            id:pedal_canvas
            anchors.fill: parent
            property var axis_Rx: []
            onPaint:{
                var ctx = getContext("2d")
                ctx.clearRect(0,0,pedal_canvas.width,pedal_canvas.height)
                //            ctx.quadraticCurveTo()
                ctx.strokeStyle = "#FF0000"
                ctx.beginPath();
                ctx.moveTo(0,axis_Rx[0])
                for(var i = 0; i < axis_Rx.length;i++){
                    ctx.lineTo(i,axis_Rx[i])
                }
                //            ctx.closePath()
                ctx.lineWidth = 2;
                //            ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI/4,Math.PI/4 + rx)
                ctx.stroke()
            }
            Canvas {
                anchors.fill: parent
                onPaint:{
                    var ctx = getContext("2d")
                    ctx.strokeStyle = "#000000"
                    ctx.moveTo(0,3)
                    for(var i = 0; i < 14;i++){
                        if(i%5 == 0){
                            ctx.moveTo(470,i*10 - 0.5)
                            ctx.lineTo(480,i*10 - 0.5)
                            ctx.closePath()
                        }else{
                            ctx.moveTo(475,i*10 - 0.5)
                            ctx.lineTo(480,i*10 - 0.5)
                            ctx.closePath()
                        }
                    }
                    //            ctx.closePath()
                    //                ctx.fontSize = '20px'
                    ctx.textAlign = 'center'
                    ctx.fillText("0",460,135)
                    ctx.fillText("1",460,10)
                    ctx.lineWidth = 0.5;
                    //            ctx.arc(canvas_rpm.width/2,canvas_rpm.height/2,180,Math.PI/4,Math.PI/4 + rx)
                    ctx.stroke()
                }
            }

            onAxis_RxChanged: {
                if(axis_Rx.length >= 480){
                    axis_Rx.shift()
                }
//                console.log("y:" + axis_Rx[axis_Rx.length - 1] + " len: " + axis_Rx.length )
                //            wheel_force.last_y = wheel_force.axis_y
                pedal_canvas.requestPaint()
                //            console.log("Y:"+wheel_force.axis_y)
            }

        }
    }
    Connections{
        target: task_brake
        function onConfigChanged(config){
            //            console.log("id: " + config["reprotid"])
            //            console.log("dead_Throttle_High: " + config["dead_Throttle_High"])
            //            console.log("dead_Rx_High: " + config["dead_Rx_High"])
            //            console.log("wave_filtering: " + config["wave_filtering"])
            switch(config["Flags"]&0xf0){
            case 1 << 4:
                rectangle4.state = "ENABLE"
                break;
            case 1 << 5:
                rectangle5.state = "ENABLE"
                break;
            case 1 << 6:
                rectangle6.state = "ENABLE"
                break;
            }
            if(config["Flags"] & 0x01){
                checkBox.checkState = Qt.Checked
            }else{
                checkBox.checkState = Qt.Unchecked
            }
            if(config["Flags"] & 0x02){
                checkBox1.checkState = Qt.Checked
            }else{
                checkBox1.checkState = Qt.Unchecked
            }
            if(config["Flags"] & 0x04){
                checkBox2.checkState = Qt.Checked
            }else{
                checkBox2.checkState = Qt.Unchecked
            }
            if(config["Flags"] & 0x08){
                checkBox3.checkState = Qt.Checked
            }else{
                checkBox3.checkState = Qt.Unchecked
            }
            rangeSlider.first.value = config["dead_Rx_Low"]
            rangeSlider.second.value = config["dead_Rx_High"]
            rangeSlider1.first.value = config["dead_Ry_Low"]
            rangeSlider1.second.value = config["dead_Ry_High"]
            rangeSlider2.first.value = config["dead_Brake_Low"]
            rangeSlider2.second.value = config["dead_Brake_High"]
            rangeSlider3.first.value = config["dead_Throttle_Low"]
            rangeSlider3.second.value = config["dead_Throttle_High"]
            slider.value = config["wave_filtering"]
            force = config["Force"]
            friction_t = config["Friction"]
            gain = config["Gain"]
            encoderCPR = config["EncoderCPR"]
            degrees = config["Degrees"]
        }
    }


}




